<template>
    <div class="echart" id="teacherList" style="width: 91%;height:350px"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
    data() {
        return {
            myChart: {},
            sortData: [], //动态排序数据
            // myChartStyle: { float: "left", }, //图表样式
            dynamicSortZZTOption: {
                title: {
                    text: '教师月发布消息排行'
                },
                xAxis: {
                    max: "dataMax"
                },
                yAxis: {
                    type: "category",
                    data: ["高刚", "石娟", "汤军", "蒋勇", "潘丽"],
                    inverse: true, // 表示 Y 轴从下往上是从小到大的排列
                    animationDuration: 300,
                    animationDurationUpdate: 300,
                    max: 4 // only the largest 3 bars will be displayed
                },
                series: [
                    {
                        realtimeSort: true, //表示开启 Y 轴的动态排序效果
                        name: "教师动态排行",
                        type: "bar",
                        data: [],
                        label: {
                            show: true,
                            position: "right",
                            valueAnimation: true
                        }
                    }
                ],
                legend: {
                    show: true
                },
                animationDuration: 3000,
                animationDurationUpdate: 3000,
                animationEasing: "linear",
                animationEasingUpdate: "linear"
            }
        };
    },
    mounted() {
        // 图表初始化
        this.myChart = echarts.init(document.getElementById("teacherList"));
        // 数据初始化
        for (let i = 0; i < 5; ++i) {
            this.sortData.push(Math.round(Math.random() * 200));
        }
        // 数据刷新
        setInterval(() => {
            this.pageUpdate();
        }, 3000);
    },
    methods: {
        // 数据刷新
        pageUpdate() {
            // console.log(this.dynamicSortZZTOption.series[0].data);
            this.dynamicSortZZTOption.series[0].data = this.sortData;
            for (let i = 0; i < this.sortData.length; ++i) {
                if (Math.random() > 0.9) {
                    this.sortData[i] += Math.round(Math.random() * 2000);
                } else {
                    this.sortData[i] += Math.round(Math.random() * 200);
                }
            }
            this.myChart.setOption(this.dynamicSortZZTOption);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        }
    }
};
</script>
<style scoped>
#teacherList {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 12px #ebedf0;
    margin: auto;
    padding: 15px 20px;
}
</style>